<template>
	<view>
		<view class="add-top font-weight-bold know-flex konw-column  color-FFFFFF " :style="{paddingTop:`${statusBarHeight}px`}"
		 :class="selectIndex==0?'bg-base1':'bg-base'">
			<view class="know-flex know-space-between know-align-end">
				<view class="add-top-title know-flex know-space-between font-50 know-align-end">
					<block>
						<view v-for="(item,index) in titleText" :key="index" @click="selectFun(index)" :class="selectIndex==index?'font-60':'noselectClass'">
							{{item}}
						</view>
					</block>
				</view>
				<view @click="back">
					<image src="/static/out.png" mode="" class="add-top-out"></image>
				</view>
			</view>
			<view class="know-flex know-align-center konw-center  know-all">
				<view>
					<text style="padding-bottom:20rpx;">￥</text>
					<text class="font-100">{{num||0}}</text>
				</view>
			</view>
		</view>
		<view class="add-type  font-weight-bold color-black3">
			<view class="font-34 add-type-title">{{selectIndex?'收入':'消费'}}类型选择</view>
			<scroll-view scroll-x :scroll-left="scrollLeft">
				<view class="add-type-list know-flex">
					<view class="add-type-list-item know-flex konw-column know-align-center" v-for="(item,index) in (selectIndex?inTypeList:outTypeList)" :key="index"
					 @click="selectTypeFun(index)">
						<view class="add-type-list-typeimg" style="padding:15rpx;" :class="selectTypeIndex==index? (selectIndex?'bg-base':'bg-base1'):''">
							<image src="/static/auto.png" mode="" class="add-type-list-typeimg"></image>
						</view>
						<view class="font-30">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view> 
		<view>
			<view class="add-keyboard  color-black3 font-35 font-weight-bold bg-FFFFFF">
				<view class="know-flex know-align-center add-keyboard-remarks color-black6">备注:<input placeholder="请输入备注" v-model="remarks"></view>
				<view class="know-flex">
					<view class="add-keyboard-left know-flex know-wrap">
						<view v-for="(item,index) in numList" :key="index" class="add-keyboard-left-item know-wrap know-flex know-align-center konw-center clickClass"
						 @click="diyKeyboardFun(item)">
							{{item}}
						</view>
					</view>
					<view class="add-keyboard-right know-flex konw-column ">
						<view class=" add-keyboard-right-time know-flex know-align-center konw-center clickClass">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="font-28">{{date}}</view>
							</picker>
						</view>
						<view class="know-all know-flex know-align-center konw-center clickClass" @click="complete">完成</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	
	import{getOutAndInType,addUserRecord } from "@/api/http/login.js" 
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				statusBarHeight: 0,
				num: '',
				inputWidth: 1,
				numList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', '清除'],
				titleText: ['支出', '收入'],
				selectIndex: 0,
				selectTypeIndex: 0,
				date: currentDate,
				remarks:'',
				scrollLeft:0,
				inTypeList:[],
				outTypeList:[],
			}
		},
		onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.getOutAndInTypeFun(0)
			this.getOutAndInTypeFun(1)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//获取类型
			getOutAndInTypeFun(type){
				getOutAndInType(type).then(res=>{
					if(res.code==200){
						if(type){
							this.inTypeList = res.data
						}else{
							this.outTypeList = res.data
						}
					}
				})
			},
			//选择日期
			bindDateChange(e) {
				this.date = e.target.value
			},
			diyKeyboardFun(value) {
				let _num = this.num
				let _value = value.toString()
				if (_value == '清除') {
					let numLength = this.num.length
					let newNum = _num.substring(0, numLength - 1)
					this.num = newNum
				} else {
					if (_num.indexOf('.') == -1) {
						this.num += _value
					} else {
						if (_value == '.') {
							return
						} else {
							this.num += _value
						}
					}
				}
			},
			getDate(type) { 
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			selectFun(index) {
				this.selectIndex = index
				this.num = ''
				this.selectTypeIndex = 0
				this.scrollLeft = 0  
			},
			selectTypeFun(index) {
				this.selectTypeIndex = index
			},
			back(){
				uni.navigateBack()
			},
			//完成提交
			complete(){
				if(!this.num){
					uni.showToast({
						icon:'none',
						title:"请填写金额"
					})
					return
				}
				let  typeList =  this.selectIndex?this.inTypeList:this.outTypeList
				let params = {
					money:this.num, //金额
					outAndIn:this.selectIndex ,//支出还是收入
					typeId: typeList[this.selectTypeIndex].id    ,//消费收入类型
					remarks:this.remarks || ''  ,//备注
					clock:this.date  //时间
				}
				addUserRecord(params).then(res=>{
					if(res.code==200 && res.data ){
						this.back()
					}
				})
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.add {
		&-top {
			height: 500rpx;
			padding: 0 30rpx;

			&-title {
				width: 35%;
				padding-top:10rpx; 
			}
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			&-out{
				width: 50rpx;
				height: 50rpx;
			}
		}

		&-type {
			padding: 20rpx 0;
			&-title {
				padding: 0 0 30rpx 30rpx;
				margin-bottom: 30rpx;
				margin-top: 20rpx;
			}
			&-list {
				&-typeimg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
				}

				&-item {
					margin-left: 30rpx;
				}
			}
		}

		&-keyboard {
			width: 100%;
			position: absolute;
			box-shadow: 0px -1px 15px #EEEEEE;
			bottom: 0;

			&-left {
				width: 75%;

				&-item {
					width: 33.3%;
					height: 135rpx;
				}
			}

			&-right {
				width: 25%;

				&-time {
					height: 135rpx;
				}
			}

			&-remarks {
				padding: 30rpx 30rpx;

				input {
					padding: 20rpx 20rpx;
				}
			}
		}
	}

	.noselectClass {
		opacity: 0.5;
	}
</style>
